import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    ScrollView,
    TouchableOpacity,
    StatusBar,
    DeviceEventEmitter,
    RefreshControl,
    AppState
} from 'react-native'
import {deviceWidth, isIPhoneX, statusBarHeight} from "src/util"
const mine_active = require('src/assets/tab/wode1.png')
const mine = require('src/assets/tab/wode.png')
import NavigationBar from "react-native-navbar"
import Layer from "src/components/Layer"
import MyInfo from '../components/MyInfo'
import MyMoney from '../components/MyMoney'
import CenterButtons from '../components/CenterButtons'
import ListItems from '../components/ListItems'
import {BoxShadow} from 'react-native-shadow'
import {inject, observer} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"



@inject('userAuth')

@observer

export default class Mine extends React.Component {


    static navigationOptions = ({ navigation, screenProps }) => ({
        header:null,
        gesturesEnabled: true,
        tabBarVisible: true,
        tabBarIcon: (({ tintColor, focused }) => {
            return (
                <Image
                    source={!focused ? mine : mine_active}
                    style={{resizeMode: 'stretch'}}
                />
            )
        }),
        tabBarLabel: '我的'
    })

    
    constructor(props) {
        super(props);
        this.state={
            refresh:false,
            isRefresh:false
        }
      }

    componentWillUnmount () {
        this.deEmitter.remove()
        this.deEmitterIdentity.remove()
        AppState.removeEventListener('change',this._handleAppStateChange);

      }
      componentWillMount(){
    
      }
      changSetState=(flag)=>{
        this.setState({
            refresh:flag
        }) 
      }

      _onRefresh=()=>{
       this.changSetState(true)
        this.props.userAuth.fetchCurrentUserInfo({token:this.props.userAuth.token})
        this.changSetState(false)
      }
      componentDidMount(){
        this.deEmitter = DeviceEventEmitter.addListener('refreshUserInfo',() => {
            this.changSetState(true)
       });
       this.deEmitterIdentity = DeviceEventEmitter.addListener('refreshUserInfoIdentity',() => {
        this.setState({
            isRefresh:true
        }) 
       });
       AppState.addEventListener('change', this._handleAppStateChange);

       StatusBar.setBarStyle('light-content');
       this.props.userAuth.fetchCurrentUserInfo({token:this.props.userAuth.token})
    }
    _handleAppStateChange=(nextAppState)=>{
        if(nextAppState=='active'){
            this.props.userAuth.fetchCurrentUserInfo({token:this.props.userAuth.token})
        }
     }
    render() {
        const shadowOpt = {
            width: deviceWidth - 32,
            height: 112,
            color:"#000",
            backgroundColor: '#000',
            border:1,
            radius:8,
            opacity:0.2,
            style:{marginTop: 16, marginLeft: 16, marginRight: 16}
        }   
        return (
            <ScrollView style={styles.container}>
            <RefreshControl refreshing={this.state.refresh}
            onRefresh={this._onRefresh}
            tintColor="#8E8E93"
            title="正在刷新..."
            titleColor="#8E8E93"
            />
                <Image source={require('src/assets/mine/background.png')}
                       style={{position: 'absolute',top:0, width: deviceWidth, height: deviceWidth * 256 / 375}}/>
                <NavigationBar
                    style={{marginTop:isIPhoneX()?0:statusBarHeight}}
                    tintColor={'transparent'}
                    rightButton={
                       <View style={styles.navButton}>
                           {/* <TouchableOpacity onPress={()=>{
                                navigationhelper.push('MySystemNotice')
                           }}>
                               <Image style={{width: 24, height: 24 }} source={require('src/assets/mine/notification.png')}/>
                           </TouchableOpacity> */}
                           <TouchableOpacity onPress={()=>{
                               navigationhelper.push('MySettingPage')
                           }}>
                                <Image style={{width: 24, height: 24 }} source={require('src/assets/mine/setting.png')}/>
                           </TouchableOpacity>
                       </View>
                    }
                />
                <MyInfo style={{marginTop: statusBarHeight}}/>
                {/* <MyMoney style={{marginTop: 30}}/> */}
                <BoxShadow setting={shadowOpt}>
                    <CenterButtons style={{backgroundColor: '#fff', borderRadius: 8}}/>
                </BoxShadow>
                <ListItems style={{marginTop: 20, marginLeft:20, marginRight: 20,backgroundColor:'#fff', borderRadius:5}}/>
            </ScrollView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5'
    },
    navButton: {
        display: 'flex',
        width: 100,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        marginLeft:20,
        marginRight:20
    }
})